import React from 'react'
import MessageSettingWordEdit from './MessageSettingWordEdit'
import MessageSettingKeyWordEdit from './MessageSettingKeyWordEdit'
import MessageSettingPictureEdit from './MessageSettingPictureEdit'
import MenuSettingPreview from '../MenuSettingPreview'
import MenuSettingAssetSelect from '../MenuSettingAssetSelect'
import MessageEventKeyList from './MessageSettingKeyList'
import MessageAddEventKey from './MessageAddEvent'

import * as MessageAction  from '../../actions/MessageAction';
import { connect }  from 'react-redux';

class MessageSettingKeyRec extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      showAddView: false
    }
  }

  componentDidMount() {

    var appId = this.props.wechat.length > 0?this.props.wechat[0].appId: ''
    this.props.dispatch(
      MessageAction.loadMessageHandlerAsync({appId: appId})
    )
  }

  componentDidUpdate() {
    // console.log(this.props.data)
  }


  onAddEventKey(data) {
    // console.log(data)
    var self = this;

    var content = {};
    if (data.responseType == 'text') {
      content = {
        text: data.text
      }
    }else if (data.responseType == 'news') {
      var items = data.newsContent.news_item;
      var news = [];
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        news.push({
          msgUrl: item.url,
          msgTitle: item.title,
          msgPicUrl: item.thumb_url,
          msgPicId: item.thumb_media_id,
          msgDescription: item.digest
        })
      }
      content = {
        news: news
      }
    }
    var requestData = {
      msgType: 'text',
      event: data.keyWord,
      eventKey: 'text',
      responseType: data.responseType,
      content: content
    }
    this.props.dispatch(
      MessageAction.createMessageHandlerAsync(requestData)
    )
    this.setState({
      showAddView: false
    })
  }

  onMessageDelete(message) {
    if (confirm("确认要删除该条消息吗?")) {
      this.props.dispatch(
        MessageAction.deleteMessageHandlerAsync({
          id: message.id
        })
      )
    }
  }

  onAddEventCancel() {
    this.setState({
      showAddView: false
    })
  }

  onButtonAddItem(event) {
    this.setState({
      showAddView: true
    });
  }

  render() {
    var self = this;
    return (
      <div className="message-rec-content">
        <button type="button" className="btn-create"
                onClick={(event) => self.onButtonAddItem(event)}>新增关键字回复</button>
        <MessageAddEventKey
          wechat = {this.props.wechat}
          onAddEventCancel = {this.onAddEventCancel.bind(self)}
          onAddEventKey = {this.onAddEventKey.bind(self)}
          isShow = {this.state.showAddView}/>
        <MessageEventKeyList
          data = {this.props.data}
          wechat = {this.props.wechat}
          onMessageDelete = {this.onMessageDelete.bind(this)}
          name="list"/>

      </div>
    )
  }

}

const mapStateToProps = (state, ownProps) => {
  // console.log(state)
  return { data: state.messageHandler }
}

export default connect(mapStateToProps)(MessageSettingKeyRec);
